/**
 * 1当点击 + 触发tap点击事件
 *    1调用小程序内置的选择图片的api
 *    2获取到图片的路径(数组)
 *    3把图片路径 存到data的变量中
 *    4页面就可以根据图片数组渲染到页面
 * 2点击自定义图片组件(删除)
 *    1获取被点击元素的索引
 *    2获取data中的图片数组
 *    3删除对应的元素
 *    4把数组重新设置会data中
 * 3点击提交
 *    1获取文本域的内容
 *      1data中定义变量
 *      2文本域绑定输入事件 事件触发的时候 把输入框的值赋值到data中
 *    2对这些内容合法性验证
 *    3验证通过 把用户选择的图片上传到专门的图片的服务器 返回图片外网的连接
 *        1遍历图片数组
 *        2挨个上传
 *        3自己再维护图片数组 存放 图片上传后的外网链接
 *        4如果没有图片也让用户上传文字
 *    4文本域 和 外网图片的路径 一起提交到服务器 (前端模拟  不发送请求到后台)
 *    5清空当前页面
 *    6返回上一页
 */
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabs:[{
      id:0,
      value:"体验问题",
      isActive:true
    },
    {
      id:1,
      value:"商品丶商家投诉",
      isActive:false
    }
    ],
    //被选中图片的路径数组
    chooseImgs:[],
    //文本域内容
    textVal:""
  },
  //外网图片的路径数组
  UpLoadImgs:[],
  handleTbsItemChange(e){
    //1. 获取被点击标题的索引
    const {index} = e.detail
    //2. 修改源数组
    let {tabs} = this.data
    tabs.forEach((v,i)=>{i===index?v.isActive=true:v.isActive=false}) 
    //3. 赋值到data中
    this.setData({
      tabs
    })
  },
  //点击 + 单击事件
  handleChooseImg(){
    //1调用小程序内置的选择图片api
    wx.chooseImage({
      //同时选中图片的最大数量
      count: 9,	// 默认为9
      sizeType: ['original', 'compressed'],	// 指定原图或者压缩图
      sourceType: ['album', 'camera'],	// 指定图片来源
      success: (res)=>{
        this.setData({
          //图片数组 进行拼接
          chooseImgs:[...this.data.chooseImgs,...res.tempFilePaths]
        })

      }
    })
  },
  //点击自定义的图片组件
  handleRemoveImg(e){
    //1获取索引
    const {index} = e.currentTarget.dataset
    //2获取图片数组
    let {chooseImgs} = this.data
    //3删除元素
    chooseImgs.splice(index,1)
    //4设置回data
    this.setData({
      chooseImgs
    })
  },
  //文本域的输入事件
  handleTextInput(e){
    this.setData({
      textVal:e.detail.value
    })
  },
  //提交按钮的点击事件
  handleFormSubmit(){
    //1获取文本域的内容 图片数组
    const {textVal,chooseImgs} = this.data
    //2合法验证
    if(!textVal.trim()){
      //不合法
      wx.showToast({
        title: '输入不合法',
        icon: 'none',
        mask: false,
      });
      return;
    }
    //3准备上传图片 到专门的外网服务器
    //上传文件的api 不支持多个文件同时上传(遍历数组)
  //   chooseImgs.forEach((v,i)=>{
  //     var upTask = wx.uploadFile({
  //       //图片上传到哪里
  //       url: 'https://images.ac.cn/api/upload/upload',
  //       //被上传文件的路径
  //       filePath: v,
  //       //上传的文件的名称 后台来获取文件 file
  //       name: "file",
  //       //顺带的文本信息
  //       formData: {},
  //       success: (result)=>{
  //       //将返回的图片路径赋值给UpLoadImgs
  //       this.UpLoadImgs.push(result.url)
  //       //所有图片上传完毕之后才触发
           //if(i===chooseImgs.length-1){
  //            将文本内容和外网的图片数组,提交到后台        
  //       }
          //提交成功 重置页面
          wx.showToast({
            title: '上传成功',
            icon: 'none',
            image: '',
            duration: 1500,
            mask: true,
            success: (result)=>{
              
            }
          });
          this.setData({
            textVal:'',
            chooseImgs:[]
          })     
        //返回上一个页面
          // wx.navigateBack({
          //   delta: 1
          // });
  //       }
  //   })
    
  // }
  // )

},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})